<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="24">
        <!-- 搜索框 -->
<!--        <el-col :span="5">-->
<!--          <el-input v-model="searchText" placeholder="请输入支行名称" clearable @change="search"></el-input>-->
<!--        </el-col>-->

        <el-col :span="3">
          <el-input v-model="listQuery.name" placeholder="请输入支行名称" clearable @change="search"></el-input>
        </el-col>

        <el-col :span="2">
          <el-select v-model="listQuery.status" placeholder="状态">
            <el-option
              v-for="item in status_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col  :span="15">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>

        <el-col :span="4">
          <el-button type="success" @click="handleAdd">增加支行</el-button>
        </el-col>
      </el-row>
    </div>


    <el-table :data="branchData" style="width: 98%;margin: 10px auto 0" border :key="branchData.length"
              v-loading="loading"
              element-loading-text="拼命加载中....">

      <el-table-column label="分行名称" align="center">
        <template slot-scope="{row}">
          <span>{{row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="tag" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 0 ? 'danger' : 'primary'" disable-transitions>
            {{scope.row.status == 0 ? '停用':'启用'}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="所属主行" align="center" >
        <template slot-scope="{row}">
          <span>{{getBankName(row.bank_id)}}</span>
        </template>
      </el-table-column>



      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="openDelete(row.bank_branch_id)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,15,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <add-branch ref="showAddDialog"/>
    <edit-branch ref="showEditDialog"/>


  </div>
</template>

<script>
  import store from '@/store'
  import {list as getBankList} from '@/api/thk/cms/bank'
  import {del, list} from '@/api/thk/cms/bankBranch'

  import addBranch from './add'
  import EditBranch from './edit'

  /**
   bank_branch_id: 7
   bank_id: 5
   name: "分行3"
   status: 1
   bankName: "农业银行"
   */

  export default {
    name: 'Bank',
    components: {
      EditBranch,
      addBranch,
    },

    data() {
      return {
        searchText: '',
        bankData: [],
        branchData: [],

        listQuery: {
          name: undefined,
          status:undefined,
          page: 1,
          pagesize: 10
        },

        total: undefined,

        status_options: [{
          value: '0',
          label: '停用'
        }, {
          value: '1',
          label: '启用'
        }, {
          value: '',
          label: '全部'
        }],

        loading: true
      }
    },

    created() {
      this.getBankData()
    },

    mounted() {
      // 如果是传递过来的type是redirect则直接从store中拿去数据
      if(this.$route.query.type === "redirect"){
        this.bankData = store.getters.getBankData
        this.getBranchDataStore()
      }else{
        this.getBranchData()
      }
    },


    updated: function () {
      this.$nextTick(function () {
        this.loading = false
      })
    },


    methods: {
      // 获取银行的数据
      getBankData(){
        getBankList(store.getters.token).then(res => {
          this.bankData = res.data.list.data
        }).catch(err => {
          console.log(err)
        })
      },

      getBranchData(){
        list(store.getters.token, this.listQuery).then(res => {
          this.total = res.data.list.total
          this.branchData = res.data.list.data
        }).catch(error => {
          console.log(error)
        })
      },

      // 通过银行获取分行的数据
      getBranchDataStore(){
        this.branchData = []
        for (let bank of this.bankData){
          let bankName = bank.name
          for (let branch of bank.all_name){
            branch.bankName = bankName
            console.log(branch)
            this.branchData.push(branch)
            console.log(this.branchData)
          }
        }
        // 存放完整的branchData数据,搜索的时候,此数据作为基础数据
        this.tempBranchData = this.branchData
      },


      // 触发增加按钮弹出增加问题对话框
      handleAdd(){
        // arg：是否点击了确定按钮,添加支行的数据,将主行的数据也传递过去,添加的时候,需要选择所属主行
        this.$refs.showAddDialog.cancelDialog(this.bankData)
      },

      // 触发编辑按钮.row是一行的数据，点击了哪一行，就是哪一行的数据，根据数据回显
      handleEdit(row){
        this.$refs.showEditDialog.showEditDialog(row)
      },

      // 删除bank
      handleDelete(bank_branch_id){
        del(store.getters.token, bank_branch_id).then(res => {
          this.getBranchData()
          console.log("删除成功!",res)
        }).catch(err => {
          console.log("删除失败",err)
        })
      },

      // 弹出是否删除对话框, then中调用handleDelete
      openDelete(bank_branch_id) {
        this.$confirm('此操作将会删除支行的信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(bank_branch_id)
          this.$message({
            type: 'success',
            message: '删除成功!'

          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      getBankName(bank_id){
        let banks = this.bankData.filter(bank => {
          return bank.bank_id === bank_id
        })

        if(banks[0]){
          return banks[0].name
        }
        return ''
      },

      search(){
        this.listQuery.page = 1
        this.getBranchData()
      },

      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getBranchData()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getBranchData()
      },

    }
  }

</script>
